﻿@model List<Product>

@{
    string title = ViewBag.CarouselTitle;
    string id = ViewBag.CarouselId;
    string categoryNameId = ViewBag.CategoryNameId;
}

@if (Model.Count > 0)
{
    <div class="bg-title">
        <h4>@title</h4>
    </div>

    <div id="@ViewBag.CarouselId-md" class="carousel slide hidden-sm hidden-xs" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
            @for (int i = 0; i < Model.Count; i = i + 4)
            {
                <div class="item">
                    <div class="row min-padding">
                        @foreach (Product item in Model.Skip(i).Take(4))
                        {
                            <div class="col-md-3">
                                @Html.Action("_ProductItem", new { product = item, lazyLoad = false })
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
        <a class="left carousel-control ctrLeft" href="#@ViewBag.CarouselId-md" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control ctrRight" href="#@ViewBag.CarouselId-md" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

    <div id="@ViewBag.CarouselId-xs" class="carousel slide hidden-lg hidden-md" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
            @for (int i = 0; i < Model.Count; i = i + 2)
            {
                <div class="item">
                    <div class="row min-padding">
                        @foreach (Product item in Model.Skip(i).Take(2))
                        {
                            <div class="col-xs-6">
                                @Html.Action("_ProductItem", new { product = item, lazyLoad = false })
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
        <a class="left carousel-control ctrLeft" href="#@ViewBag.CarouselId-xs" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control ctrRight" href="#@ViewBag.CarouselId-xs" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
}
